<template>
  <div>

    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
    >
      <el-menu-item index="1" class="el-hover">处理中心</el-menu-item>
      <el-submenu index="2">
        <template #title>我的工作台</template>
        <el-menu-item index="2-1" class="el-hover">选项1</el-menu-item>
        <el-menu-item index="2-2" class="el-hover">选项2</el-menu-item>
        <el-menu-item index="2-3" class="el-hover">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="4" class="el-hover">订单管理</el-menu-item>
      <div>
        <span style="float:right; color: #E9EEF3;margin-right: 10px">用户名:小明</span>
      </div>
    </el-menu>
  </div>
</template>

<script lang="ts">
import  {defineComponent,ref} from  'vue'
export default defineComponent({
  name: "index",
  setup() {
   return {}
  }
})
</script>

<style scoped>
.el-hover:hover {
  background-color: rgb(24, 144, 255) !important;
}
.is-active {
  background-color: rgb(24, 144, 255) !important;
  color: #E9EEF3 !important;
}

</style>